import React from 'react';
import { useIntl, FormattedMessage, connect, Link } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Button } from 'antd';
import DescriptionDrawer from '@/pages/item/MyItemList/components/DescriptionDrawer';
import ProCard from '@ant-design/pro-card';
import { searchAuthTradeList, searchSaleTradeList } from '@/services/trade/trade';
import { searchItemList } from '@/services/item/item';
import moment from 'moment';

const MyItemList = (props) => {
  const { dispatch, currentUser, tab } = props;
  const intl = useIntl();

  const statusEnum = ['确权中', '确权成功', '出售中', '拍卖中', '授权中'];

  const categoryEnum = {
    1: '文字作品',
    2: '图片作品',
    3: '视频作品',
  };

  const columns = [
    {
      title: <FormattedMessage id="pages.work.workList.fileColumns.index" />,
      valueType: 'index',
    },
    {
      title: <FormattedMessage id="pages.work.workList.title" />,
      dataIndex: 'name',
    },
    {
      title: <FormattedMessage id="pages.work.workList.category" />,
      dataIndex: 'category',
      valueType: 'select',
      valueEnum: categoryEnum,
    },
    {
      title: <FormattedMessage id="pages.work.workList.fileColumns.txHash" />,
      dataIndex: 'txHash',
    },
    {
      title: <FormattedMessage id="pages.work.workList.createdAt" />,
      dataIndex: 'createdAt',
      valueType: 'dateTime',
    },
    {
      title: <FormattedMessage id="pages.work.workList.fileColumns.status" />,
      hideInSearch: true,
      render: (text, record) => {
        if (record.owner.id !== record.creator.id) {
          return '已转出';
        }
        return statusEnum[record.status];
      },
    },
    {
      title: <FormattedMessage id="pages.work.workList.operation" />,
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        record.status > 0 && (
          <Button
            key="detail"
            type="link"
            onClick={() => {
              dispatch({
                type: 'myItemList/setShowDetail',
                payload: { showDetail: true, currentRow: record },
              });
            }}
          >
            确权信息
          </Button>
        ),
        record.status >0 && (
          <Link key="trade" to={`/trade/item/${record.id}`}>
            详情
          </Link>
        ),
      ],
    },
  ];

  const tradeColumns = [
    {
      title: <FormattedMessage id="pages.work.workList.fileColumns.index" />,
      valueType: 'index',
    },
    {
      title: '作品名称',
      render: (_, record) => {
        return record.item.name;
      },
    },
    {
      title: '出售方',
      hideInSearch: true,
      render: (_, record) => {
        return record.from.username;
      },
    },
    {
      title: '价格',
      hideInSearch: true,
      dataIndex: 'price',
      valueType: 'money',
    },
    {
      title: '购买时间',
      hideInSearch: true,
      render: (_, record) => {
        return moment.unix(record.blockTime).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '交易编号',
      hideInSearch: true,
      dataIndex: 'txHash',
    },
  ];

  const authColumns = [
    {
      title: <FormattedMessage id="pages.work.workList.fileColumns.index" />,
      valueType: 'index',
    },
    {
      title: '作品名称',
      render: (_, record) => {
        return record.item.name;
      },
    },
    {
      title: '授权方',
      hideInSearch: true,
      render: (_, record) => {
        return record.from.username;
      },
    },
    {
      title: '价格',
      hideInSearch: true,
      dataIndex: 'price',
      valueType: 'money',
    },
    {
      title: '授权时间',
      hideInSearch: true,
      render: (_, record) => {
        return moment.unix(record.blockTime).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '交易编号',
      hideInSearch: true,
      dataIndex: 'txHash',
    },
  ];

  return (
    <PageContainer>
      <ProCard
        tabs={{
          tabPosition: 'top',
          activeKey: tab,
          onChange: (key) => {
            dispatch({
              type: 'myItemList/setTab',
              payload: key,
            });
          },
        }}
      >
        <ProCard.TabPane key="tab1" tab="确权作品">
          <ProTable
            rowKey="id"
            columns={columns}
            params={{ creatorID: currentUser.id }}
            request={(params, sorter, filter) => searchItemList({ ...params, sorter, filter })}
            options={false}
          />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab2" tab="购买的版权">
          <ProTable
            rowKey="id"
            columns={tradeColumns}
            params={{ userID: currentUser.id }}
            request={(params, sorter, filter) => searchSaleTradeList({ ...params, sorter, filter })}
            options={false}
          />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab3" tab="购买的授权">
          <ProTable
            rowKey="id"
            columns={authColumns}
            params={{ userID: currentUser.id, type: 5 }}
            request={(params, sorter, filter) => searchAuthTradeList({ ...params, sorter, filter })}
            options={false}
          />
        </ProCard.TabPane>
      </ProCard>

      <DescriptionDrawer />
    </PageContainer>
  );
};

export default connect(({ user, myItemList }) => ({
  currentUser: user.currentUser,
  tab: myItemList.tab,
}))(MyItemList);
